<template>
	<view>
		<view class="head">
			<image src="../../static/images/arrow_left.png" mode=""></image>
			<view class="">欠款历史</view>
			<view class="f32" @click="more">更多</view>
			<!-- 更多 -->
			<view class="more" v-show="ShowMore">
				<view class="moreLeft" @click="Go">
					<image src="../../static/client/222.png" mode=""></image>
					调整欠款
				</view>
				<view class="moreLeft">
					<image src="../../static/client/111.png" mode=""></image>
					分享欠款
				</view>
			</view>
		</view>

		<view class="box">
			<view class="box-top">
				<view class="">202003-23 12:23:34</view>
				<view class="">累计欠款：¥177.34</view>
			</view>
			<view class="box-center">
				<view class="">本次应收：¥20.00</view>
				<view class="">
					<image src="../../static/spe/02.png" mode=""></image>
					下单
				</view>
			</view>
			<view class="box-center">
				<view class="">本次收款：¥0.00</view>
				<view class=""></view>
			</view>
		</view>
		<view class="meng" v-show="meng"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			meng: false, //蒙层
			ShowMore: false //更多
		};
	},
	methods: {
		more() {
			(this.meng = true), (this.ShowMore = true);
		},
		Go(){
				(this.meng = false), (this.ShowMore = false);
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}
.head {
	height: 88rpx;
	line-height: 88rpx;
	background-color: #249af6;
	color: #ffffff;
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	position: relative;
	image {
		width: 22rpx;
		height: 39rpx;
		margin-top: 25rpx;
	}
}
.box {
	margin-top: 30rpx;
	// height: 273rpx;
	background-color: #ffffff;
	.box-top {
		height: 110rpx;
		line-height: 110rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		border-bottom: 3rpx solid #eeeeee;
	}
	.box-center {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		padding: 0 30rpx;
		line-height: 100rpx;
		image {
			width: 40rpx;
			height: 40rpx;
			vertical-align: middle;
			margin-right: 20rpx;
		}
	}
}
.more {
	height: 230rpx;
	width: 255rpx;
	line-height: 115rpx;
	background-color: #ffffff;
	position: absolute;
	bottom: -230rpx;
	right: 33rpx;
	z-index: 2;
	padding: 0 31rpx;
	box-sizing: border-box;
	border-radius: 10rpx;
	.moreLeft {
		height:50%;
		padding-top: 30rpx;
		box-sizing: border-box;
		border-bottom: 3rpx solid #eeeeee;
		image {
			width: 44rpx;
			height: 44rpx;
			vertical-align: middle;
			margin-right: 26rpx;
			position: relative;
			top: -15rpx;
			text {
				line-height: 110rpx;
			}
		}
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 48rpx;
	}
}
.meng {
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.7;
	position: fixed;
	top: 0;
}
</style>
